<template>
	<view class="container">
		<view class="group-profile" :style="'top:' + topgroup">
			<!-- <TUI-group-profile  id="groip-profile" :conversation="conversation" /> -->
		</view>
		<view class="message-list">
			<TUI-message-list id="message-list" ref="messageList" :conversation="conversation" />
		</view>
		<view v-if="videoPlay" class="container-box" @click.stop="stopVideoHander">
			<video
				@click.stop=""
				v-if="videoPlay"
				class="video-message"
				:src="videoMessage.payload.videoUrl"
				:poster="videoMessage.payload.thumbUrl"
				object-fit="cover"
				error="videoError"
				autoplay
				direction="0"
			/>
		</view>
		<view class="ads" v-if="showText" @click.stop="showText = false">
			<view class="text-messages">
				<view v-for="(item, index) in textList" :key="index" class="message-body-span">
					<span class="message-body-span-text" v-if="item.name === 'span'">{{ item.text }}</span>
					<image v-if="item.name === 'img'" class="emoji-icon" :src="item.src"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { parseText } from './base/message-facade';
import TUIMessageList from '@/chat/tui-chat/message-list/index.vue';
import TUIGroupProfile from '@/chat/tui-group/group-profile/index';
const app = getApp();
export default {
	components: {
		TUIMessageList,
		TUIGroupProfile
	},
	props: {},
	data() {
		return {
			videoPlay: false,
			showText: false,
			textList: [],
			conversation: {},
			videoMessage: {}
		};
	},
	created() {
		uni.$on('textHandler', (value) => {
			this.showText = value.isshow;
			this.textList = parseText(value.message);
		});
		uni.$on('videoPlayerHandler', (value) => {
			this.videoPlay = value.isPlay;
			this.videoMessage = value.message;
		});
	},
	onLoad(options) {
		uni.$TUIKit.getConversationProfile(options.conversationID).then((res) => {
			const { conversation } = res.data;
			this.conversation = conversation;
			uni.setNavigationBarTitle({
				title: this.conversation.userProfile.nick
			});
		});
		uni.$TUIKit.setMessageRead({ conversationID: options.conversationID }).then(() => {});
	},
	mounted() {},
	methods: {
		stopVideoHander() {
			this.videoPlay = false;
		}
	}
};
</script>
<style>
@import './chat.css';
</style>
